<template>
	<view>
		<view class="example">
			<uni-forms ref="form" :modelValue="establishFrom" :rules="rules">
				<uni-forms-item :label="InboundTime" name="date" required>
					<uni-datetime-picker type="date" return-type="date" v-model="establishFrom.date"
						 :clear-icon="false" />
				</uni-forms-item>
				<uni-forms-item :label="LibraryName" name="title" required>
					<uni-easyinput maxlength="10" v-model="establishFrom.title" placeholder="请输入姓名" />
				</uni-forms-item>

				<uni-forms-item :label="Granary" name="warehouse_id" required>
					<uni-data-select v-model="establishFrom.warehouse_id" value="" :localdata="warehouseNewList"
						:clear="false" @change="changeWarehous"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item :label="Commodity" name="goods_list" required>
					<zxz-uni-data-select :placeholder="PleaseSelectAWarehouseFirst" :multiple="true" :filterable="true"
						v-model="establishFrom.goods_list" :localdata="commoditylist" @change="inputChange">
					</zxz-uni-data-select>
				</uni-forms-item>
				<view class="commodity_box" :style="{height:accountLength}">
					<view v-for="(item,index) in establishFrom.newProduct" :key="index" class="commodity">
						{{item.text}}
						<fui-button v-model="item.stock"></fui-button>
					</view>
				</view>

				<uni-forms-item :label="Remark" name="remark">
					<uni-easyinput maxlength="50" type="textarea" v-model="establishFrom.remark"
						:placeholder="PleaseEnterAComment" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<button type="primary" class="operation" @click="submit" v-if="isSubmit">{{ $t('common.Submit') }}</button>
	</view>
</template>

<script>
	import fuiButton from '@/components/fui-input-number/fui-input-number.vue'
	import {
		currenTime
	} from '@/common/config/timeFormat.js'
	//获取商品
	import {
		warehouseList,
	} from '@/api/warehouse.js'
	// 获取库
	import {
		addWarehouseIn,
		enterSpeciFication, //新增用的接口
		redactBankDeatils,
		getGoodsList, //入库商品列表
		amendLibrary
	} from '@/api/library.js'

	export default {
		data() {
			return {
				establishFrom: {
					title: '', //入库名
					warehouse_id: null, //仓库
					goods_list: [], //商品
					remark: '', //备注
					date: currenTime(), //入库时间

					type: 3, //
					newProduct: [], //商品参数（需要删除）
				},
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '请输入库名',
						}]
					},
					warehouse_id: {
						rules: [{
							required: true,
							errorMessage: '请选择入库',
						}]
					},
					goods_list: {
						rules: [{
							required: true,
							errorMessage: '请选择商品',
						}]
					},
				},
				warehouseNewList: [], //仓库列表
				commoditylist: [], //商品列表

				conduction: {}, //传值接收的对象
				isSubmit: true //是否显示提交按钮
			};
		},

		computed: {
			accountLength() {
				return this.establishFrom.newProduct.length >= 4 ? '220rpx' : ''
			},
			InboundTime() {
				return this.$t('outEnter.InboundTime') 
			},
			LibraryName() {
				return this.$t('outEnter.LibraryName') 
			},
			Granary(){
				return this.$t('outEnter.Granary') 
			},
			Commodity(){
				return this.$t('orderFrom.Commodity') 
			},
			Remark(){
				return this.$t('orderFrom.Remark') 
			},
			PleaseEnterAComment(){
				return this.$t('orderFrom.PleaseEnterAComment') 
			},
			PleaseSelectAWarehouseFirst(){
				return this.$t('orderFrom.PleaseSelectAWarehouseFirst') 
			}
		},
		components: {
			fuiButton
		},
		onShow() {
			this.gatherList()
		},
		onLoad(item) {
			this.conduction = item
			this.getDeatils()
		},
		methods: {
			gatherList() {
				// 仓库列表
				warehouseList(0).then(res => {
					if (res.length) {
						res = res.map(code => {
							return {
								...code,
								text: code.name,
								value: code.id
							}
						})
					}
					this.warehouseNewList = res
				})
			},
			changeWarehous(e) {
				this.establishFrom.newProduct = []
				// 选择仓库时,调用商品接口列表
				this.getSpecification(e)
			},
			getSpecification(e) {
				this.commoditylist = []
				// 仓库商品规格（商品列表）
				enterSpeciFication(e).then(res => {
					if (res.data.length) {
						res.data = res.data.map(code => {
							return {
								...code,
								text: code.name,
								value: code.id,
								stock: 1
							}
						})
					}
					this.commoditylist = res.data
				})
			},
			// 选择商品
			inputChange(e) {
				this.establishFrom.newProduct = e
			},
			submit() {
				this.$refs.form.validate().then(res => {
					this.establishFrom.goods_list = this.establishFrom.newProduct.map(code => ({
						product_id: code.id,
						goods_id: code.goods_id,
						stock: code.stock,
					}))
					// delete this.establishFrom.newProduct


					if (this.conduction.id) {
						// 修改
						amendLibrary(this.conduction.id, this.establishFrom).then(res => {
							console.log(res, '4554545445');
							this.establishFrom = {}
							this.establishFrom.newProduct = []
							uni.navigateBack({
								delta: 1
							})
						})

					} else {
						// 添加
						addWarehouseIn(this.establishFrom).then(res => {
							console.log(res, '4554545445');
							this.establishFrom = {}
							this.establishFrom.newProduct = []
							uni.navigateBack({
								delta: 1
							})
						})

					}


				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			// 获取详细详细
			getDeatils() {
				if (this.conduction.id) {
					uni.setNavigationBarTitle({
						title: this.$t('outEnter.CreateALibrary')
					})
					redactBankDeatils(this.conduction.id).then(res => {
						// console.log('获取详细详细：', res);
						if (res.status === 0) {
							this.isSubmit = true
						} else {
							this.isSubmit = false
						}

						this.establishFrom.date = res.date
						this.establishFrom.title = res.title
						this.establishFrom.warehouse_id = res.warehouse_id
						this.establishFrom.remark = res.remark

						this.getSpecification(res.warehouse_id) //仓库商品规格（商品列表）

						getGoodsList(this.conduction.id).then(res => {
							res.data = res.data.map(code => {
								return {
									...code,
									text: code.name,
									value: code.id,
									stock: code.stock
								}
							})
							res.data.forEach(code => {
								this.establishFrom.goods_list.push(code.product_id)
							})
							this.establishFrom.newProduct = res.data
							// console.log(this.establishFrom.goods_list, res.data, '入库商品列表');
						})

					})

				} else {
					this.isSubmit = true
					uni.setNavigationBarTitle({
						title: this.$t('outEnter.ModifyTheLibrary')
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.operation {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 10%;
		width: 500rpx;
	}

	.commodity {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.commodity_box {
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 25rpx;
	}
</style>